<template>
    <div id="app">
        <div class="content">
            <div class="weizhi">您当前位置：<span @click="toIndex" style="cursor:pointer;">首页</span><span v-for="item in parentNames" @click="navigateToList(item.id)" style="cursor:pointer;"> ｜ {{item.name}}</span></div>
            <div class="content-tit">
                <h2>{{ info.title }}</h2>
                <h3>来源： {{ info.belongName + ' - ' + info.departName }} 发布时间：{{moment(info.createTime).format('YYYY-MM-DD')}} 浏览次数：{{ info.count }} </h3>
            </div>
            <div class="content-txt video-box">
                <vue-core-video-player :cover="info.cover" :src="'http://156.6.10.253:8080/admin' + info.content" style="width: 1045px;height: 480px;">
                    <track kind="subtitles" srclang="zh" label="Chinese">
                </vue-core-video-player>
            </div>
        </div>
    </div>
</template>

<script type="text/javascript">
import '../../static/css/css.css';

import Vue from 'vue'
import VueCoreVideoPlayer from 'vue-core-video-player'
import request from "@/utils/request";
import page from './page'
import moment from "moment";

Vue.use(VueCoreVideoPlayer, {
    lang: 'zh-CN'
})

export default {
    name: '',
    components: {},
    data() {
        return {
            cover: '',
            value: '',
            contentId: '',
            info: {},
            parentNames: []
        }
    },
    watch: {
        $route: {
            handler() {
                const currentContentId = this.$route.query.contentId
                this.find(currentContentId)
            },
            deep: true
        }
    },
    created() {
        const currentContentId = this.$route.query.contentId
        this.find(currentContentId)
    },
    mounted() {
        const currentContentId = this.$route.query.contentId;
        this.find(currentContentId)
    },
    methods: {
        find(currentContentId){
            if (currentContentId != undefined && currentContentId != this.contentId) {
                this.contentId = currentContentId
                this.getContent()
                this.statistics(this.contentId)
            }
        },
        moment,
        toIndex() {
            this.$router.push({
                path: '/'
            })
        },
        getContent() {
            request({
                url: '/business/getContentInfo/' + this.contentId,
                method: 'get'
            }).then((res) => {
                this.info = res.data.data
                this.statistics(this.contentId)
                this.getParentNames(this.info.categoryId)
            })
        },
        statistics(id) {
            // var handler = setInterval(function () {
            request({
                url: '/business/addStatistics/' + id,
                method: 'get'
            }).then((res) => {
                console.log("添加统计信息成功")
                // clearInterval(handler)
            })
            // }, 2 * 1000)
        },
        getParentNames(categoryId){
            request({
                url: '/business/parentNames/' + categoryId,
                method: 'get'
            }).then((res) => {
                this.parentNames = res.data.data.reverse()
            })
        },
        navigateToList(id) {
            let newR = this.$router.resolve({
                path: '/list', query: {
                    categoryId: id
                }
            })
            window.open(newR.href,'_blank')
        },
    }
}
</script>content.vue

<style scoped>
/*详情页面*/
.content {
    padding: 20px;
}

.weizhi {
    font-size: 14px;
    line-height: 38px;
    border-bottom: 1px #CCCCCC dashed;
    margin-bottom: 10px;
    padding-bottom: 10px;
}

.content-tit h2 {
    text-align: center;
    color: #f50000;
    font-size: 22px;
    margin: 15px 0;
}

.content-tit h3 {
    text-align: center;
    font-weight: normal;
}

.content-txt {
    margin-top: 45px;
}

.video-box {
    width: 1045px;
    height: 480px;
    background-color: #333333;
}

.video-list {
    width: 1045px;
    margin-top: 20px;
}

.video-list ul {
    padding: 20px;
    border: 1px #CCCCCC solid;
    list-style: disc;
}

.video-list ul li {
    line-height: 32px;
    margin-left: 20px;
}

.video-list ul li a {
    color: #333333;
}
</style>
